<template>
 <!-- :class="{empty:noOneSpeaking}" -->
    <div id="active" :class="{empty:noOneSpeaking, student: isStudent, teach: !isStudent, pad_121: /_121/.test(classMode)}">
        <div id="apply-list"></div>
        <div v-if="!isStudent" id="active-list">
            <div class="placeholder stu-speak-wrap"></div>
        </div>
        <div v-if="isStudent&&/_SMALL/i.test(classMode)" id="small-stuspeak-list" class="stu-speak-wrap">
        </div>

        <!-- 自己播放器 -->
        <div v-if="isStudent&&0" class="live-self-player">
          <SelfPlayer />
        </div>
    </div>
</template>

<script>
let eventEmitter = BJY.eventEmitter
let auth = BJY.auth
// 自己播放器
import SelfPlayer from '../SelfPlayer'
let store = BJY.store

export default {
  name: 'activeList',
  components: {
    SelfPlayer
  },
  data () {
    return {
      medias: {},
      classMode: '',
      isStudent: false,
      applyList: null,
      activeList: null,
      noOneSpeaking: true
    }
  },
  computed: {},
  watch: {},
  methods: {
    studentShowSpeak () {
      let dos = {}
      let id = ''
      let userList = BJY.data.user.all().filter((v)=>{return v.status === 0 && v.type == 0})
      for(let user of userList){
        if(user.number == store.get('user.number')) continue
        id = `yxp-stu-${user.number}`
        dos[user.number] = 1
        if(user.audioOn){
          if(!this.medias[user.number]){
            $('#small-stuspeak-list').append(`<div class="stu-speak-media" id="${id}"></div>`)
            this.medias[user.number] = BJY.DefaultThemePlayer.create({
              element: $(`#${id}`),
              replace: false,
              user: user,
              extension: BJY.getExtension(),
              canSwitchCamera: false,
              canSwitchMic: false
            })
          }
        }else{
          if(this.medias[user.number]){
            this.medias[user.number].destroy()
            $(`#${id}`).remove()
            delete this.medias[user.number]
          }
        }
      }
      for(let num in this.medias){
        if(!dos[num]){
          this.medias[num].destroy()
          $(`#yxp-stu-${num}`).remove()
          delete this.medias[num]
        }
      }
    }
  },
  created () {
    let that = this
    this.isCheck = Number(BJY.query.is_check) || 0
    this.isStudent = auth.isStudent()
    this.isCheck === 1 && (this.isStudent = false)
    this.classMode = store.get('yxp_class_mode')
    if(/_SMALL/i.test(this.classMode)){
      if(this.isStudent){
        BJY.api.onReceiveBroadcast(
          'YXP_SPEAK_NOTICE',
          function(fromeId, data, cache) {
            // 忽略自己广播信息
            if(fromeId == store.get('user.id')) return false
            setTimeout(() => {
              that.studentShowSpeak()
            }, 1000)
            // 关闭其它学生麦只保留一个学生上麦
            if(data.speak){
              eventEmitter.trigger(eventEmitter.MEDIA_SWITCH_TRIGGER, {
                videoOn: true,
                audioOn: false
              })
            }
          }
        )
        this.studentShowSpeak()
      }else{
        // let player = null
        // BJY.api.onReceiveBroadcast(
        //   'YXP_SPEAK_NOTICE',
        //   function(fromeId, data, cache) {
        //     console.log(555, fromeId, data)
        //     if(data.speak){
        //       let userList = BJY.data.user.all().filter((v)=>{return v.status === 0 && v.type == 0})
        //       for(let user of userList){
        //         if(user.id == fromeId) continue
        //         console.log(888, user)
        //         if(user.audioOn){
        //           player = BJY.Player.instances[user.id]
        //           player && BJY.userPublish.setDevice(player, true, false)
        //         }
        //       }
        //     }
        //   }
        // )
      }
    }
    eventEmitter.on(eventEmitter.CLASS_END, () => {
      if(/_SMALL/i.test(this.classMode)){
        if(this.isStudent){
          this.studentShowSpeak()
        }
      }
    })
  },
  mounted () {
    let that = this
    if(!this.isStudent){
      let activeList = BJY.ActiveList.create({
        element: $('#active-list .placeholder'), // 父容器
        extension: BJY.getExtension(), // 播放器扩展
        width: 260, // 父容器宽度，用于计算播放器的高度
        replace: false // 是否替换父容器下的 DOM
      })

      eventEmitter.on(
        eventEmitter.ACTIVE_LIST_PRESENTER_CHANGE_TRIGGER,
        function (event, data) {
          activeList.changePresenter(data.newPresenter, data.oldPresenter)
        }
      )

      activeList.watch('userList.length', (newValue, oldValue) => {
        if (newValue !== 0) {
          this.noOneSpeaking = false
        } else {
          this.noOneSpeaking = true
        }
      })

      // 申请列表
      this.applyList = BJY.ApplyList.create({
          element: $('#apply-list'), // 组件父容器
          replace: false,  // 是否替换父容器下的 DOM
      });
    }
    if(/_SMALL/i.test(that.classMode)){

    }
  },
  beforeDestroy () {}
}
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
#active {
   overflow-y: auto;
  .live-self-player {
    height: 195px;
    width: 299px;
    position: absolute;
    bottom: 0;
    transition: .2s bottom;
  }
   &>.hide {
      bottom: -200px !important;
  }

  &>.hide .bjy-fold-bar {
      top: -24px !important;
  }

  &>.hide .bjy-fold-bar .bjy-fold-toggle {
      background: #424242 !important;
  }
  #active-list, #small-stuspeak-list {
    height: 100%;
    overflow-y: auto;
  }
}
.empty {
  height: 100%;
  width: 100%;
  background: url('../../../assets/img/active-user-list-empty.png') center center no-repeat;
}
.student {
  height: calc(100% - 326px);
}
.teach {
  height: calc(100% - 195px)
}
.pad_121{
  height: 195px;
}
</style>
